<template>
  <div class="demo-container">
    <!-- 
        @search  当child中的-search触发，触发回调函数"handleSearch"，将选择框中的参数带给handleSearch中的params
        这里的  :action-buttons 对应child中的actionButtons
     -->
    <DisplayDemo title="充电卡管理"
                 :action-buttons="tableButtons"
                 @action="handleTableAction"
                 :columns="columns"
                 :data="tableData"
                 :total="total"
                 :current-page="pageNum"
                 :page-size="pageSize"
                 :advanced-fields="advancedFields"
                 show-advanced-toggle
                 @search="handleSearch"
                 :pageSize.sync="pageSize"
                 :currentPage.sync="pageNum"
                 @reset="reset"
                 @selection-change="handleSelectionChange">
      <!-- 自定义操作列 -->
      <!-- 
          #operations类似于  v-slot:operations，也就是在对应的slot中进行操作
          {row}  接收子组件传递的row数据
          按钮：每个组件都可以访问当前行的row组件
       -->
      <template #operations="{ row }">
        <!-- 
            这里是操作中的每一栏
         -->
        <el-button type="text"
                   @click="handleActivate(row)">激活</el-button>
        <el-button type="text"
                   @click="handleRecharge(row)">充值</el-button>
        <el-button type="text"
                   @click="handleDelete(row)">删除</el-button>
      </template>

      <!-- 自定义状态列 -->
      <template #column-cardCondition="{ row }">
        <el-tag :type="(statusMap[row.cardCondition] || statusMap._default).type"
                size="small">
          {{ (statusMap[row.cardCondition] || statusMap._default).label }}
        </el-tag>
      </template>
    </DisplayDemo>
  </div>
</template>

<script>
  import DisplayDemo from './DisplayDemo.vue'

  const vm = {
    components: { DisplayDemo },
    data () {
      return {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        multipleSelection: [],
        statusMap: {
          1: { label: '禁用', type: 'danger' },
          2: { label: '登记', type: 'warning' },
          3: { label: '已激活', type: 'success' },
          // 添加默认处理
          _default: { label: '未知', type: 'info' }
        },
        /* 
            此处为最顶端的搜索框的配置
        */
        tableButtons: [
          { label: '新增', action: 'add', type: 'primary', icon: 'el-icon-plus' },
          { label: '提交', action: 'submit', icon: 'el-icon-upload2' },
          { label: '处理', action: 'process', icon: 'el-icon-setting' },
          {
            label: '删除',
            action: 'delete',
            type: 'danger',
            icon: 'el-icon-delete',
          },
        ],
        // 此处对应每一列，type中的内容与后端中的实体类属性对应，label为列名
        columns: [
          { type: 'selection', width: 55 },
          { prop: 'index', label: '序号', width: 80 },
          { prop: 'cardNum', label: '卡号', width: 200 },
          { prop: 'clientName', label: '所属人' },
          { prop: 'membershipLevelValue', label: '会员等级' },
          { prop: 'createdTime', label: '开卡时间' },
          { prop: 'amount', label: '余额', align: 'right' },
          { prop: 'cardCondition', label: '状态', width: 100, align: 'center' },
          { type: 'operation', label: '操作', width: 220, fixed: 'right' },
        ],
        // 此处为高级搜索框中的内容
        advancedFields: [
          {
            prop: 'owner',
            label: '所属人',
            type: 'input',
            span: 5,
            props: { placeholder: '请输入所属人姓名', clearable: true },
          },
          {
            prop: 'owner',
            label: '所属人',
            type: 'input',
            span: 5,
            props: { placeholder: '请输入所属人姓名', clearable: true },
          },
          {
            prop: 'status',
            label: '状态',
            type: 'select',
            span: 5,
            props: { placeholder: '请选择状态' },
            options: [
              { label: '全部', value: '' },
              { label: '禁用', value: 1 },
              { label: '登记', value: 2 },
              { label: '已激活', value: 3 },
            ],
          },
        ],
        // 展示的数据
        tableData: [
          {
            id: 1,
            cardNum: 'CARD-2023001',
            owner: '张三北京分公司',
            balance: 845.23,
            status: 3,
            registerDate: '2023-07-15',
            phone: '13800138001',
          },
        ],
      }
    },
    watch: {
      // 监听页码变化
      pageNum (newPageNum) {
        this.fetchData()
      },
      // 监听页数变化
      PageSize (newPageSize) {
        this.pageNum = 1  // 在这里重置页码
        this.fetchData()
      }
    },
    methods: {
      // 当页面中的页数，页面大小变化时，调用这个方法
      async fetchData () {
        console.log("页面进行了改变:pageSize为"
          + this.pageSize
          + ",pageNum为"
          + this.pageNum);

        this.queryAll()
      },
      queryAll () {
        const pageParam = {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
        }
        this.$axios.post('api/card/queryAll', pageParam)
          .then(res => {
            if (res.data.code == 200) {
              // console.log(res.data.data);

              this.total = res.data.data.total
              this.tableData = res.data.data.list
            }
          })
      },
      // 当点击查询按钮时候，进行查询
      handleSearch (params) {

        console.log('搜索参数:', params)
      },
      // 每一列的操作中的按钮
      handleActivate (row) {
        console.log('激活:', row)
      },
      handleRecharge (row) {
        console.log('充值:', row)
      },
      // 
      handleDelete (row) {
        console.log('删除:', row)
      },

      // 当点击最上面的增删改查时，调用对用的方法
      handleTableAction ({ type, selectedRows }) {
        switch (type) {
          case 'add':
            this.handleTableAdd();
            break;
          case 'edit':
            this.handleTableEdit(selectedRows);
            break;
          case 'delete':
            this.handleTableDelete(selectedRows);
            break;
          case 'submit':
            this.handleTableSubmit(selectedRows);
            break;
          default:
            console.error(`未知的 action 类型: ${type}`);
        }
      },
      // 当点击  “新增按钮” 触发该方法
      handleTableAdd () {
        console.log('新增操作')
      },
      handleTableDelete (param) {
        console.log("删除操作:")
        console.log(param);

      },
      handleTableSubmit () {
        console.log('提交操作');

      },
      // 当多选框改变时，触发的函数
      handleSelectionChange (params) {
        // 多选框进行了修改
        this.multipleSelection = params
      },
      reset () {
        console.log("进行了重置");

      }
    },
    created () {
      this.queryAll()
    }
  }
  export default vm
</script>

<style scoped>
  .demo-container {
    padding: 20px;
    background: #f0f2f5;
    min-height: 100vh;
  }
</style>
